<template>
  <div>
    <!-- 个人中心 -->
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="个人中心">
      <van-icon @click="$router.go(-1)" class='left-icon' slot='left' name='arrow-left'></van-icon>
    </van-nav-bar>
    <!-- 单元格内容 -->
    <!-- 点击选择图片 hidden隐藏 -->
    <input ref='inp' type="file" hidden @change='onInputChange'>
    <van-cell @click='$refs.inp.click()' title="头像" is-link>
      <van-image class="avatar" fit="cover" round :src="users.photo" />
    </van-cell>
    <van-cell title="昵称" @click='isShowEditName=true' :value="users.name" is-link />
    <van-cell title="性别" @click='isShowEditGender=true' :value="users.gender ? '女':'男'" is-link />
    <van-cell title="生日" @click='isShowEditBirthday=true' :value="users.birthday" is-link />

    <!-- 编辑昵称弹出层 -->
    <van-popup v-model="isShowEditName" position="bottom" :style="{ height: '100%' }">
      <!-- 编辑昵称组件 -->
      <EditName v-if='isShowEditName' v-model='users.name' @left-click='isShowEditName=false'></EditName>
    </van-popup>
    <!-- 编辑性别弹出层 -->
    <van-popup v-model="isShowEditGender" position="bottom">
      <!-- 编辑性别组件 -->
      <EditGender v-if='isShowEditGender' v-model='users.gender' @close='isShowEditGender=false'></EditGender>
    </van-popup>
    <!-- 编辑生日弹出层 -->
    <van-popup v-model="isShowEditBirthday" position="bottom">
      <!-- 编辑生日组件 -->
      <EditBirthday v-if='isShowEditBirthday' @close='isShowEditBirthday=false' v-model='users.birthday'></EditBirthday>
    </van-popup>
    <!-- 编辑头像弹出层 -->
    <van-popup v-model="isShowEditAvatar" position="bottom" style='height:100%'>
      <!-- 展示图片组件 -->
      <EditAvatar @onUploadSuccess='users.photo=$event' @close='isShowEditAvatar=false' :image='image'></EditAvatar>
    </van-popup>
  </div>
</template>

<script>
// 编辑头像组件
import EditAvatar from './components/edit-avatar.vue'
// 编辑生日组件
import EditBirthday from './components/edit-birthday.vue'
// 编辑性别组件
import EditGender from './components/edit-gender.vue'
// 编辑昵称组件
import EditName from './components/edit-name.vue'
// 获取用户个人信息请求
import { getUserInfo } from '@/api/user.js'
export default {
  data () {
    return {
      // 个人信息数据
      users: {},
      // 控制编辑昵称弹出层显示
      isShowEditName: false,
      // 控制编辑性别弹出层显示
      isShowEditGender: false,
      // 控制编辑生日弹出层显示
      isShowEditBirthday: false,
      // 保存上传图片地址
      image: '',
      // 控制编辑头像弹出层显示
      isShowEditAvatar: false
    }
  },
  methods: {
    // 选择图片之后
    onInputChange (e) {
      // 获取图片
      const file = e.target.files[0]
      // 转换为URL地址
      const image = URL.createObjectURL(file)
      this.image = image
      this.isShowEditAvatar = true
      // 让选中的图片清空
      e.target.value = ''
    },
    // 获取用户信息
    async loadUserInfo () {
      try {
        const res = await getUserInfo()
        this.users = res.data.data
      } catch (err) {
        this.$toast('获取数据失败')
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    EditName,
    EditGender,
    EditBirthday,
    EditAvatar
  },
  created () {
    // 获取用户信息
    this.loadUserInfo()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.avatar {
  width: 50px;
  height: 50px;
}
</style>
